<template>
  <div>
    <my-container title="查看详情">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>车辆信息</span>
        </div>
        <el-row>
          <el-col v-for="item in cardOne" :key="item.prop" :span="12">
            <el-col :span="5" style="color:#aaa;">{{ item.label }}:</el-col>
            <el-col :span="7">{{ formData[item.prop] }}</el-col>
          </el-col>
        </el-row>

      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>月卡缴费记录</span>
        </div>
        <my-table :table-data="formData.rechargeList" :columns="columnData" />

      </el-card>

    </my-container>
  </div>
</template>

<script>
import MyContainer from '@/components/my-container'
import { getViewCardAPI } from '@/api/monthCard'
import MyTable from '@/components/CustomTable3.vue'
const addins = {
  'Alipay': '支付宝',
  'WeChat': '微信',
  'Cash': '线下'
}
export default {
  components: {
    MyContainer, MyTable },
  data() {
    return {

      formData: {},
      cardOne: [
        { label: '车主姓名', prop: 'personName' },
        { label: '联系方式', prop: 'phoneNumber' },
        { label: '车牌号码', prop: 'carNumber' },
        { label: '车辆品牌', prop: 'carBrand' }
      ],
      columnData: [
        { label: '有效时间', render: ({ row }) => row.cardStartDate + '至' + row.cardEndDate },
        { label: '支付金额', prop: 'paymentAmount' },
        { label: '支付方式', prop: 'paymentMethod', render: ({ row }) => addins[row.paymentMethod] },
        { label: '办理时间', prop: 'createTime' },
        { label: '办理人', prop: 'createUser' }
      ]
    }
  },
  async created() {
    this.formData = await getViewCardAPI(this.$route.params.id)
  }
}
</script>

<style>
.el-card {
    margin-top: 30px;}
.el-col-5{
  text-align: right;
}
.el-col-7{
  text-align: center;
}
</style>
